<!DOCTYPE html>
<html>
<head>
    <title>Quantum Mechanics Figure</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = "italic 20px 'Times New Roman'";

        // Origin point
        const ox = 250;
        const oy = 280;

        // Function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Main Drawing ---

        // Draw the ring (ellipse)
        ctx.beginPath();
        const radiusX = 160;
        const radiusY = 55;
        ctx.ellipse(ox, oy, radiusX, radiusY, 0, 0, 2 * Math.PI);
        ctx.stroke();

        // Draw coordinate axes
        ctx.beginPath();
        // z-axis (vertical)
        drawArrow(ox, oy + radiusY + 20, ox, oy - 180);
        // y-axis (horizontal right)
        drawArrow(ox, oy, ox + radiusX + 40, oy);
        // x-axis (diagonal bottom-left)
        const xAngle = (220 * Math.PI) / 180;
        const xLen = 140;
        const xEnd = { x: ox + xLen * Math.cos(xAngle), y: oy + xLen * Math.sin(xAngle) };
        drawArrow(ox, oy, xEnd.x, xEnd.y);
        ctx.stroke();

        // Draw radial lines and angle
        // These lines are in the x<0, y>0 quadrant (top-left on canvas)
        const t_theta = 1.6 * Math.PI; // Parameter for theta line
        const t_R = 1.7 * Math.PI;     // Parameter for R line

        const p_theta = {
            x: ox + radiusX * Math.cos(t_theta),
            y: oy + radiusY * Math.sin(t_theta)
        };
        const p_R = {
            x: ox + radiusX * Math.cos(t_R),
            y: oy + radiusY * Math.sin(t_R)
        };

        ctx.beginPath();
        // Line for angle theta
        ctx.moveTo(ox, oy);
        ctx.lineTo(p_theta.x, p_theta.y);
        // Line for radius R
        ctx.moveTo(ox, oy);
        ctx.lineTo(p_R.x, p_R.y);
        ctx.stroke();

        // Draw angle arc for theta
        // The arc is from the positive y-axis (our canvas +x axis) to the theta line
        ctx.beginPath();
        const arcRadius = 35;
        // The angle of the theta line in canvas coordinates
        const angle_theta_canvas = Math.atan2(p_theta.y - oy, p_theta.x - ox);
        ctx.arc(ox, oy, arcRadius, angle_theta_canvas, 0, true); // From line to y-axis, counter-clockwise
        ctx.stroke();

        // --- Labels ---
        // Axes labels
        ctx.fillText('z', ox + 8, oy - 175);
        ctx.fillText('y', ox + radiusX + 45, oy + 8);
        ctx.fillText('x', xEnd.x - 20, xEnd.y + 5);

        // R and theta labels
        ctx.fillText('R', p_R.x + 5, p_R.y - 10);
        ctx.fillText('θ', ox - 50, oy - 20);

        // Figure caption
        ctx.font = "18px 'Times New Roman'";
        ctx.fillText('Fig. 4.7', ox - 35, oy + 150);

    </script>
</body>
</html>